<template>
    <div>
        <v-btn outlined
               color="primary"
               height="40px"
               @click="newFolderDialog = true"
        >
            <v-icon left size="25px">mdi-folder-plus-outline</v-icon>
            新建文件夹
        </v-btn>
        <v-dialog
                v-model="newFolderDialog"
                persistent
                overlay-opacity="0.2"
                max-width="400px"
        >
            <my-loading-overlay :loading-overlay="loadingOverlay"></my-loading-overlay>
            <v-card outlined>
                <v-card-title class="subtitle-1" style="border-bottom: 1px solid #d0dfe7">新建文件夹</v-card-title>
                <v-card-text class="mt-8">
                        <v-text-field
                                outlined
                                label="文件夹名"
                                v-model="name"
                                class="mt-3"
                                dense
                                clearable
                                autofocus
                                ref="folderName"
                                :rules="[fileNameRule]"
                                @keydown.enter="newFolder()"
                        >
                        </v-text-field>
                </v-card-text>
                <v-card-actions>
                    <v-btn class="ml-10" width="130" color="primary" @click="newFolder()">新建</v-btn>
                    <v-btn class="ml-10" width="130" color="warning" @click="close()">取消</v-btn>
                </v-card-actions>
            </v-card>
        </v-dialog>
    </div>

</template>

<script>
    import {fileNameRule} from "../../../util/rule";
    import MyLoadingOverlay from "../common/MyLoadingOverlay";

    export default {
        name: "MyNewFolderBtn",
        components: {MyLoadingOverlay},
        data() {
            return {
                name: '',
                newFolderDialog: false,
                loadingOverlay: false,
                fileNameRule
            }
        },
        methods: {
            newFolder() {
                let _this = this;
                if (_this.$refs['folderName'].validate()) {
                    _this.loadingOverlay = true;
                    _this._post({
                        url: 'system/disk/new-folder',
                        data: {
                            name: _this.name,
                            path: _this.$route.query.path
                        }
                    }).then((rsp => {
                        if (rsp.data.code === '00000') {
                            _this.$emit("new-success");
                            _this.$refs['folderName'].reset();
                            _this.newFolderDialog = false;
                        } else {
                            this.$error({message: rsp.data.msg});
                        }
                    })).catch((error => {
                        console.log(error);
                        _this.$serverError();
                    })).finally(() => {
                        _this.loadingOverlay = false;
                    })
                }
            },
            close() {
                this.newFolderDialog = false;
                this.$refs.form.reset();
            }
        }
    }
</script>

<style scoped>

</style>